<template>
  <div class="main-list">
    <div class="shop-itenm" v-for="(shop,index) in shopList">
      <div class="shop-first">
        <div class="shop-name">
          <div>
            <img style="height: 15px;width: 15px;margin-right: 5px" src="/static/images/pinduoduo.png"/>
            <span class="pingtai">拼多多</span>
          </div>
          <div>
            <span class="dianpumingcheng" style="color: #373E4F">{{ shop.shopName }}</span>
            <span class="dianpumingcheng" style="color: #A3AAB7">店铺名称：</span>
          </div>
        </div>
        <div class="shop-info">
          <span>状态：{{ shop.authorizationFlag }}</span>
          <span style="float:right;">到期时间：{{  shop.guoqishijian }}</span>
        </div>
      </div>
      <div class="shop-sencod">
        <a @click="del(shop.id)">删除</a>
        <a @click="auth(shop.id)">授权</a>
      </div>
    </div>
    <div class="foot" @click="rela">关联新店铺</div>
    <tanchuan ref="tanchuanDel" :title="title" :content="content" @doCancle="doCancleDel"
              @doConfirm="doConfirmDel"></tanchuan>
    <tanchuan ref="tanchuanRela" :title="title" :src="src" :content="content" @doCancle="doCancleRela"
              @doConfirm="doConfirmRela"></tanchuan>
    <toast ref="toast"/>
  </div>
</template>

<script>

    import tanchuan from '@/components/tanchuan'
    import toast from '@/components/toast'
    import api from '@/utils/api'


    export default {
        components: {
            tanchuan, toast
        },

        data() {
            return {
                title: '',
                content: '',
                src: '',
                shopList: []
            }
        },

        created() {

        },

        onLoad(options) {
            this.list();
        },


        methods: {

            add0(m) {
                return m < 10 ? '0' + m : m
            },

            guoqishijian(time) {
                //timestamp是整数，否则要parseInt转换,不会出现少个0的情况
                var time = new Date(time);
                var year = time.getFullYear();
                var month = time.getMonth() + 1;
                var date = time.getDate();
                return year + '-' + this.add0(month) + '-' + this.add0(date)
            },
            authorizationFlag(flag) {
                if (flag == 1) {
                    return '已授权';
                } else if (flag == 0) {
                    return '未授权';
                }
            },

            //获取列表
            list() {
                var _this = this;
                wx.request({
                    url: wx.getStorageSync("otherPath") + api.shopList + "?ecstoken=" + wx.getStorageSync('sessionId'),
                    method: "POST",
                    header: {
                        ecstoken : wx.getStorageSync('sessionId'),
                        fslb : wx.getStorageSync('fslb')
                    },
                    data: {},
                    success(res) {
                        var tList = res.data.data;
                        for (var i in tList) {
                            tList[i].guoqishijian = _this.guoqishijian(tList[i].r2ExpiredTime);
                            tList[i].authorizationFlag = _this.authorizationFlag(tList[i].authorizationFlag);
                        }
                        _this.shopList = tList;
                    },
                    fail() {
                        _this.$refs.toast.show('网络异常')
                    }
                })
            },

            del(shopId) {
                this.title = '确认删除';
                this.content = '确定删除此平台店铺？';
                this.$refs.tanchuanDel.show();
            },

            doCancleDel() {
                this.$refs.tanchuanDel.hidden();
                this.$refs.toast.show('取消删除')
            },

            doConfirmDel() {
                var _this = this;
                wx.request({
                    url: wx.getStorageSync("otherPath") + api.deleteConcernShop + "?ecstoken=" + wx.getStorageSync('sessionId'),
                    method: "POST",
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        ecstoken : wx.getStorageSync('sessionId'),
                        fslb : wx.getStorageSync('fslb')
                    },
                    data: {
                        shopId: "1"
                    },
                    success(res) {
                        if(res.data.code != 200){
                            _this.$refs.toast.show(res.data.msg);
                            return ;
                        }
                        _this.$refs.toast.show('删除成功')
                    },
                    fail() {
                        _this.$refs.toast.show('网络异常')
                    },
                    complete(){
                        _this.$refs.tanchuanDel.hidden();
                    }
                })
            },

            auth() {
                var _this = this;
                var openId = "";
                try {
                    openId = wx.getStorageSync('openId');
                    if (value) {
                        // Do something with return value
                    }
                } catch (e) {
                    // Do something when catch error
                }
                //获取链接地址
                wx.request({
                    url: wx.getStorageSync("otherPath") + api.pdd + "?ecstoken=" + wx.getStorageSync('sessionId'),
                    data: {
                        openId: openId
                    },
                    method: "POST",
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        ecstoken : wx.getStorageSync('sessionId'),
                        fslb : wx.getStorageSync('fslb')
                    },
                    success(res) {
                        if(res.data.code != 200){
                            _this.$refs.toast.show(res.data.msg);
                            return ;
                        }
                        try {
                            wx.setStorageSync('guideUrl', res.data.data);
                            var url = "../guide/main";
                            mpvue.navigateTo({url})
                        } catch (e) {

                        }
                    },
                    fail() {
                        _this.$refs.toast.show('网络异常')
                    },
                })
            },

            rela() {
                this.title = '选择平台';
                this.content = '更多平台持续对接中，敬请期待！';
                this.src = "/static/images/pinduoduo.png";
                this.$refs.tanchuanRela.show();
            },

            doCancleRela() {
                this.$refs.tanchuanRela.hidden();
            },

            doConfirmRela() {
                this.$refs.tanchuanRela.hidden();
            }
        }
    }
</script>

<style lang="wxss">
  page {
    width: 100%;
    height: 100%;
    background-color: #F7FBFF;
  }
</style>

<style scoped>

  .shop-itenm {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
    background-color: #FFFFFF;
    height: 100px;
  }

  .shop-first {
    height: 60px;
    line-height: 60px;
  }

  .shop-first .shop-name {
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .shop-first .shop-name .pingtai {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(55, 62, 79, 1);
    line-height: 30px;
  }

  .shop-first .shop-name .dianpumingcheng {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(163, 170, 183, 1);
    float: right;
  }

  .shop-info {
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .shop-info span {
    vertical-align: middle;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(163, 170, 183, 1);
    line-height: 15px;
  }

  .shop-sencod {
    text-align: right;
    height: 40px;
    box-shadow: 0px 2px 4px 0px rgba(7, 127, 255, 0.1);
  }

  .shop-sencod a {
    line-height: 40px;
    float: right;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(0, 119, 255, 1);
    margin-right: 10px;
  }

  .foot {
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0;
    background-color: #0077FF;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 40px;
  }
</style>
